/**
 * 不正常事件报告
 */
<template>
	<vp-main-page @refresh="loadDataList" :tableRef="tableRef">
		<template #search>
			<el-form ref="searchFormRef" :model="searchForm" @submit.prevent @keyup.enter="loadDataList" label-width="120px">
				<vp-search-row :show-more="showMore">
					<vp-search-col>
						<el-form-item prop="keyword">
							<template #label><vp-label zh="关键字" en="Keyword"/></template>
							<el-input v-model="searchForm.keyword" v-trim></el-input>
						</el-form-item>
					</vp-search-col>
					<vp-search-col>
						<el-form-item prop="fjjxList">
							<template #label><vp-label zh="机型" en="A/C Type"/></template>
							<VpAircraftTypeMultSelect
								:selected="searchForm.fjjxList"
								@aircraftModelMultSelected="(data: any) => {searchForm.fjjxList = data}"
								class="w100"
							/>
						</el-form-item>
					</vp-search-col>
					<vp-search-col>
						<el-form-item prop="fjzchList">
							<template #label><vp-label zh="机号" en="A/C REG"/></template>
							<AircraftMultSelect 
								:selected="searchForm.fjzchList" 
								:fjjxList="searchForm.fjjxList"
								@aircraftMultSelected="(data: any) => {searchForm.fjzchList = data}"
								class="w100"
							/>
						</el-form-item>
					</vp-search-col>
					<vp-search-col>
						<el-form-item prop="sfrq">
							<template #label><vp-label zh="事发日期" en="Incident Date"/></template>
							<el-date-picker
								v-model="searchForm.sfrq"
								type="daterange"
								start-placeholder="开始日期/Start Date"
								end-placeholder="结束日期/End Date"
								value-format="YYYY-MM-DD"
								unlink-panels
								range-separator="-"
								class="w100"
							>
							</el-date-picker>
						</el-form-item>
					</vp-search-col>
					<vp-search-col>
						<el-form-item prop="sfdd">
							<template #label><vp-label zh="事发地点" en="Incident Location"/></template>
							<el-input v-model="searchForm.sfdd" v-trim></el-input>
						</el-form-item>
					</vp-search-col>
					<vp-search-col>
						<el-form-item prop="bgrq">
							<template #label><vp-label zh="报告日期" en="Report Date"/></template>
							<el-date-picker
								v-model="searchForm.bgrq"
								type="daterange"
								start-placeholder="开始日期/Start Date"
								end-placeholder="结束日期/End Date"
								value-format="YYYY-MM-DD"
								unlink-panels
								range-separator="-"
								class="w100"
							>
							</el-date-picker>
						</el-form-item>
					</vp-search-col>
					<vp-search-col>
						<el-form-item prop="fsjd">
							<template #label><vp-label zh="事发阶段" en="Incident Stage"/></template>
							<DictMulitSelect 
								:lxid='2001'
								:selectedId="searchForm.fsjd"
								@dictMulitSelected='(data: any) => {searchForm.fsjd = data}'
								class="w100"
							/>
						</el-form-item>
					</vp-search-col>
					<vp-search-col>
						<el-form-item prop="gzhg">
							<template #label><vp-label zh="故障后果" en="Failure Consequences"/></template>
							<DictMulitSelect 
								:lxid='2002'
								:selectedId="searchForm.gzhg"
								@dictMulitSelected='(data: any) => {searchForm.gzhg = data}'
								class="w100"
							/>
						</el-form-item>
					</vp-search-col>
					<vp-search-col>
						<el-form-item prop="ztList">
							<template #label><vp-label zh="状态" en="Status"/></template>
							<VpStatusMultSelect v-model="searchForm.ztList" />
						</el-form-item>
					</vp-search-col>
					<vp-search-col btn-col>
						<vp-btn-search :loading="loading" @click="loadDataList"/>
						<vp-btn-reset @click="handleSearchReset"/>
						<vp-btn-more @change="showMore = $event"/>
					</vp-search-col>
				</vp-search-row>
			</el-form>
		</template>
		<template #actions>
			<vp-btn-add v-auth="'qualitySafetyAbnormalReport.add'" @click="handleAdd"/>
			<vp-btn-export @click="handleExport"/>
		</template>
		<template #table>
			<vp-vxe-table
				id="qualitySafetyAbnormalReportTable"
				ref="tableRef" 
				:data="tableData" 
				@sort-change="handleSortChange" 
				row-key="id"
				v-loading="loading"
			>	
				<vxe-column type="seq" align="center" title="#" width="50" />
				<vxe-column 
					sortable
					field="bh" 
					title="报告编号 Report No."
					show-overflow
					width="120"
				>
					<template #header><vp-label zh="报告编号" en="Report No."/></template>
					<template #default="scope">
						<span v-html="markTextColor(searchForm.keyword, scope.row.bh)"/>
					</template>
				</vxe-column>
				<vxe-column 
					sortable
					field="sfrq" 
					title="事发日期 Incident Date"
					show-overflow
					width="130"
				>
					<template #header><vp-label zh="事发日期" en="Incident Date"/></template>
				</vxe-column>
				<vxe-column 
					sortable
					field="fjjx" 
					title="机型 A/C Type"
					show-overflow 
					width="110"
				>
					<template #header><vp-label zh="机型" en="A/C Type"/></template>
				</vxe-column>
				<vxe-column 
					sortable
					field="fjzch" 
					title="机号 A/C REG"
					show-overflow 
					width="100"
				>
					<template #header><vp-label zh="机号" en="A/C REG"/></template>
				</vxe-column>
				<vxe-column 
					field="sfdd" 
					title="事发地点 Incident Location"
					show-overflow 
					width="130"
				>
					<template #header><vp-label zh="事发地点" en="Incident Location"/></template>
				</vxe-column>
				<vxe-column 
					field="sfjd" 
					title="事发阶段 Incident Stage"
					show-overflow 
					width="180"
				>
					<template #header><vp-label zh="事发阶段" en="Incident Stage"/></template>
				</vxe-column>
				<vxe-column 
					sortable
					title="事件描述 Incident Desc."
					field="sjms" 
					show-overflow 
					width="200"
				>
					<template #header><vp-label zh="事件描述" en="Incident Desc."/></template>
					<template #default="scope">
						<span v-html="markTextColor(searchForm.keyword, scope.row.sjms)"/>
					</template>
				</vxe-column>
				<vxe-column 
					sortable
					title="处理情况 Handling Status"
					field="clqk" 
					show-overflow 
					width="220"
				>
					<template #header><vp-label zh="处理情况" en="Handling Status"/></template>
					<template #default="scope">
						<span v-html="markTextColor(searchForm.keyword, scope.row.clqk)"/>
					</template>
				</vxe-column>
				<vxe-column 
					width="150"
					title="事件补充描述 Suppl. Desc."
					field="bcbgms"
					show-overflow 
				>
					<template #header><vp-label zh="事件补充描述" en="Suppl. Desc."/></template>
				</vxe-column>
				<vxe-column 
					title="处理情况补充 Suppl. Handling"
					field="bcclqk"
					width="150"
					show-overflow 
				>
					<template #header><vp-label zh="处理情况补充" en="Suppl. Handling"/></template>
				</vxe-column>
				<vxe-column 
					sortable
					title="关联事件清单 Related Incident"
					field="sjqdid" 
					show-overflow 
					width="150"
				>
					<template #header><vp-label zh="关联事件清单" en="Related Incident"/></template>
					<template #default="scope">
						<el-link type="info" @click="handleViewList(scope.row.sjqdid)" class="foc-link" :underline="false">{{ scope.row.sjqdbh }}</el-link>
					</template>
				</vxe-column>
				<vxe-column 
					sortable
					title="状态 Status"
					field="zt" 
					show-overflow
					width="180"
				>
					<template #header><vp-label zh="状态" en="Status"/></template>
					<template #default="scope">
						<span>{{ getStatusDesc(scope.row.zt) }}</span>
						<span v-if="scope.row.zt===88">{{ "（" + scope.row.lczt + "）"}}</span>
					</template>
				</vxe-column>
				<vxe-column 
					field="operation" 
				 	title="操作 Operations"
					fixed="right" 
					width="240"
				>
					<template #header><vp-label-operations/></template>
					<template #default="scope">
						<el-space>
							<vp-btn-edit v-if="scope.row.zt === 10" text v-auth="'qualitySafetyAbnormalReport.edit'" @click="handleEdit(scope.row)"/>
							<vp-btn-del v-if="scope.row.zt === 10" text v-auth="'qualitySafetyAbnormalReport.edit'" @click="handleDelete(scope.row)"/>
							<vp-btn type="primary" v-if="scope.row.zt === 89" text v-auth="'qualitySafetyAbnormalReport.edit'" @click="handleModifyAssociation(scope.row)">
								<vp-label zh="修改清单关联" en="Modify Related"/>
							</vp-btn>
							<vp-btn-discard v-if="scope.row.zt === 88 || scope.row.zt === 89" text v-auth="'qualitySafetyAbnormalReport.discard'" @click="handleEnd(scope.row)"/>
							<vp-btn-view text @click="handleView(scope.row.id)"/>
							<vp-btn-print text @click="handlePrint(scope.row)"/>
						</el-space>
					</template>
				</vxe-column>
			</vp-vxe-table>
		</template>
		<template #pagination>
			<vp-pagination
				@change="loadDataList"
				:total="page.total" 
				v-model:currentPage="page.pageNum"
				v-model:pageSize="page.pageSize"
			>
			</vp-pagination>
		</template>
		<EditAbnormalMaintenance ref="editAbnormalMaintenanceRef" @formSubmited="handleFormSubmited"></EditAbnormalMaintenance>
		<EditAssociatedList ref="editAssociatedListRef" @formSubmited="handleFormSubmited"></EditAssociatedList>
	</vp-main-page>
</template>
<script setup lang="ts" name="qualitySafetyAbnormalReport">
import { onMounted, reactive, ref } from 'vue'
import request from '/@/utils/request';
import EditAbnormalMaintenance from './component/workflows/EditAbnormalMaintenance.vue';
import EditAssociatedList from './component//dialogs/EditAssociatedList.vue';
import { markTextColor } from '/@/utils/toolsValidate';
import { useRouter } from 'vue-router';
// import AircraftMultSelect from '/@/components/vp/aircraft/VpAircraftMultSelect.vue';
// import VpAircraftTypeMultSelect from "/@/components/vp/aircraftType/VpAircraftTypeMultSelect.vue";
import DictMulitSelect from "/@/components/vp/dict/VpDictSelectMulit.vue";
import { DEFAULT_PAGE } from '/@/utils/page';
import VpMessageBox from '/@/components/vp/VpMessageBox';
import commonFunction from '/@/utils/commonFunction';
import VpStatusMultSelect from "/@/components/vp/status/VpStatusMultSelect.vue";

const searchForm = reactive({
	keyword: "",
	fjjxList: [],
	fjzchList: [],
	fsjd: [],
	gzhg: [],
	sfrq: [],
	sfdd: "",
	bgrq: [],
	ztList: [10, 88, 89],
});

const page = reactive({
	...DEFAULT_PAGE,
})

const showMore = ref(false);
const loading = ref(false);
const tableData = ref([]);

const router = useRouter();
const editAssociatedListRef = ref();

// 加载列表数据
const loadDataList = () => {
	loading.value = true
	request.get('/abnormal/maintenance/list', {
		params: {
			...searchForm,
			...page,
		}
	}).then(res => {
		tableData.value = res?.data?.list || [];
		page.total = res?.data?.total || 0;
		page.pageNum = res?.data?.pageNum || 1;
	}).finally(()=>{
		loading.value = false;
	})
}

const searchFormRef = ref();

// 重置搜索条件
const handleSearchReset = ()=>{
	searchFormRef.value.resetFields();
}

// 列表字段排序
const handleSortChange = (column: any)=>{
	page.sortColumn = column.field;
	page.sortOrder = column.order;
	loadDataList()
}

onMounted(() => {
	loadDataList();
})

const editAbnormalMaintenanceRef = ref();
const tableRef = ref();

const handleAdd = ()=>{
	editAbnormalMaintenanceRef.value.handleOpen({
		type: 'add'
	});
}

const handleEdit = (row: any)=>{
	editAbnormalMaintenanceRef.value.handleOpen({
		type: 'edit',
		id: row.id
	});
}

const handleFormSubmited = ()=>{
	loadDataList();
}

const handleView = (id: string)=>{
	router.push({
		name: 'viewAbnormalMaintenance',
		params: {
			id: id,
		},
	})
}

// 删除
const handleDelete = (row: any)=>{
	VpMessageBox.confirmDelete().then(()=>{
		loading.value = true;
		request.delete(`/abnormal/maintenance/${row.id}/${row.sjbb}`).then(res => {
			loadDataList();
		}).catch(() => {}).finally(() => {
			loading.value = false;
		})
	});
}

const handleViewList = (id: string)=>{
	router.push({
		name: "viewAbnormalList",
		params: {
			id: id,
		},
	})
}
const handleModifyAssociation = (row: any)=>{
	editAssociatedListRef.value.handleOpen(row.id, 1);
}

const {exportFile, printFile, getStatusDesc} = commonFunction();

const handleExport = () =>{
	exportFile({
		url: `/abnormal/maintenance/export`, 
		params: {
			...searchForm,
			cnbs : 1,
		},
		fileName: '不正常事件报告.xlsx',
	});
}

const handlePrint = (row: any) =>{
	printFile({
		url: `/abnormal/maintenance/print/${row.id}`
	});
}

const handleEnd = (row: any)=>{
	VpMessageBox.confirmDiscard().then(()=>{
		loading.value = true;
		request.post("/abnormal/maintenance/end", {
			id: row.id,
		}).then(res => {
			loadDataList();
		}).catch(() => {}).finally(() => {
			loading.value = false;
		})
	});
}
</script>